<template>
  <div class="app-container">
      <el-card shadow="always" style="width: 50%;margin-top: 5px;">
          <div class="chart-box target-change">
              <div class="box-title">近期能力调用</div>
              <div class="chart" id="leftChart"></div>
          </div>
      </el-card>
      <div class="left" style="display: flex;flex-wrap: wrap;margin-left: 5px;width: 50%;">
          <el-card shadow="always" style="width: 100vh;margin-top: 0px;height: 40vh;">
              <div class="div">
                  <div class="box-title">近期能力调用排行</div>
                  <div class="forPlay">
                      <div v-if="capSub.length > 0" class="tbTbody" :style="autoRun">
                          <div class="tbTr" v-for="(item, index) in capSub" :key="index">
                              <div class="tbTd tbThL" style="cursor: pointer">
                                  {{ item.name }}
                              </div>
                              <div class="tbTd tbThS" style="cursor: pointer">
                                  <span v-if="item.isOnline == 1" style="color: green">
                                        {{item.total}}
                                  </span>
                                  <span v-if="item.isOnline == -1" style="color: red">
                                       {{item.total}}
                                  </span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </el-card>
          <el-card shadow="always" style="width: 100vh;margin-top: 16px;height:40vh;">
              <div class="div">
                  <div class="box-title">总排行</div>
                  <div class="forPlay">
                      <div v-if="capSub.length > 0" class="tbTbody" :style="autoRun">
                          <div class="tbTr" v-for="(item, index) in capSub2" :key="index">
                              <div class="tbTd tbThL" style="cursor: pointer">
                                  {{ item.name }}
                              </div>
                              <div class="tbTd tbThS" style="cursor: pointer">
                                  <span v-if="item.isOnline == 1" style="color: green">
                                     {{item.total}}
                                  </span>
                                  <span v-if="item.isOnline == -1" style="color: red">
                                        {{item.total}}
                                  </span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </el-card>
      </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getuseing} from "@/api/statistics/statistics";

export default {
  name: 'CapUtility',
    data() {
      return {
        leftChartData: [],
          leftChart: null,
          //滚动定时器
          leftInterval: null,
          //1
          autoValue: 0,
          autoValueLenth: 9,
          currentautoValue: 10,
          capSub: [


          ],
           //

          capSub2: [


          ],
      }
  },
  computed: {
      autoRun() {
          return "transform: translateY(" + this.autoValue + "%);transition: 1.5s";
      },

  },
  mounted() {
      // 自动滚动表格定时器
      this.leftInterval = setInterval(() => {
          this.currentautoValue = this.currentautoValue + 1;
          if (this.currentautoValue + 6 > this.autoValueLenth) {
              this.currentautoValue = 0;
              this.autoValue = 0;
          } else {
              this.autoValue = this.autoValue - 17;
          }
      }, 2000);
      getuseing().then(res => {
        this.capSub = res.data.recentRanking
        this.capSub2 = res.data.ranking
        if(this.capSub.length==0){

          this.capSub = [
            {
              name: '暂无数据',
              total: 0,
              isOnline: 1
            }
          ]
        }
        if(this.capSub2.length==0){
          this.capSub2 = [
            {
              name: '暂无数据',
              total: 0,
              isOnline: 1
            }

          ]
        }
        this.leftChartData = res.data.erlist
        this.getleftChart( this.leftChartData)
      })
      this.getleftChart()
  },
  methods: {
    renderTime(date) {
      // 将传入的日期字符串或日期对象转换为 Date 对象
      const dateObj = new Date(date);

      // 使用 padStart 方法确保月份和日期始终为两位数
      const year = dateObj.getFullYear();
      const month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
      const day = dateObj.getDate().toString().padStart(2, '0');

      // 返回格式化的年月日字符串
      return `${year}-${month}-${day}`;
    }
    ,
      getleftChart(data) {
          let datax = []
          let ins = []
          let outs = []
          data.forEach((item, index) => {
              datax.push(this.renderTime(item.time))
              // ins.push(item.ins)
              outs.push(item.outs)
          })
          let option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              grid: {
                  left: 0,
                  right: 20,
                  bottom: 22,
                  top: 50,
                  containLabel: true
              },
              legend: {
                  data: ['use'],
                  right: 10,
                  top: 12,
                  textStyle: {
                      color: "#000"
                  },
                  itemWidth: 12,
                  itemHeight: 10,
              },
              xAxis: {
                  type: 'category',
                  data: datax,
                  axisLabel: {
                      margin: 10,
                      color: 'rgba(24, 29, 25, 1)',
                      fontFamily: 'PingFang SC',
                      fontWeight: 400,
                      fontSize: 14,
                  },
                  axisTick: {//坐标轴刻度相关设置。
                      show: false,
                  },
                  axisLine: {//坐标轴轴线相关设置
                      lineStyle: {
                          color: '#E5E9ED',
                          // opacity:0.2
                      }
                  },
                  splitLine: { //坐标轴在 grid 区域中的分隔线。
                      show: false,
                      lineStyle: {
                          color: '#E5E9ED',
                          // 	opacity:0.1
                      }
                  }
              },
              yAxis: {
                  minInterval: 1, //不允许出现小数位
                  axisTick: { show: false },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: 'rgba(120, 203, 255, .2)'
                      }
                  },
                  splitArea: { show: false },
                  axisLine: { show: false },
                  axisLabel: {
                      margin: 5,
                      color: 'rgba(24, 29, 25, 1)',
                      fontFamily: 'PingFang SC',
                      fontSize: 14,
                  }
              },
              series: [
                  {
                      name: 'use',
                      type: 'line',
                      barWidth: '15%',
                      itemStyle: {
                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: '#8bd46e'
                          }, {
                              offset: 1,
                              color: '#09bcb7'
                          }]),
                          borderRadius: 11,
                      },
                      data: ins,
                      stack: 'x',
                      areaStyle: {},
                  },
                  {
                      name: 'use',
                      type: 'line',
                      barWidth: '15%',
                      itemStyle: {
                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: '#248ff7'
                          }, {
                              offset: 1,
                              color: '#6851f1'
                          }]),
                          borderRadius: 11,
                      },
                      data: outs,
                      areaStyle: {}
                  }]
          };
          this.leftChart = this.getEchartsInstance('leftChart')
          this.leftChart.setOption(option, true)
      },
      // echarts获取实例 画图
      getEchartsInstance(id) {
          let chart = echarts.getInstanceByDom(document.getElementById(id))
          if (chart === undefined) {
              chart = echarts.init(document.getElementById(id), null, { renderer: 'svg' })
          }
          return chart
      }
  },
  watch: {
      // 监听左侧菜单收缩 调整echarts图表大小
      "$store.state.app.sidebar": {
          deep: true,
          handler: function (newVal, oldVal) {
              setTimeout(() => { // 因为elementUI的侧边栏收缩展开的延时时间是300
                  this.leftChart.resize()
              }, 300)
          }
      },
  },
  beforeDestroy() {
      clearInterval(this.leftInterval);
  }
}
</script>

<style scoped lang="scss">
.app-container {
  margin: 0;
  display: flex;
  align-items: center;
  padding: 20 10px;

  .el-card {
      .chart-box {
          width: 100%;
          height: 80vh;
          margin-top: -15px;
          position: relative;
          .box-title {
              height: 37px;
              width: 90%;
              margin: 0 auto;
              font-size: 23px;
              font-family: PingFang SC;
              font-weight: 600;
              color: #00C0FF;
              text-align: center;
              line-height: 33px;
          }

          .chart {
              width: 96%;
              height: 80vh;
              position: absolute;
              left: -60%;
              right: -60%;
              margin: 0 auto;
          }


      }
  }
}

.div {
  height: 280px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  text-align: center;
  margin-top: -15px;
  font-size: 20px;
  color: rgba(61, 189, 255, 1);

  .box-title {
      height: 37px;
      width: 100%;
      margin: 0px auto;
      font-size: 23px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #00C0FF;
      text-align: center;
      line-height: 33px;
  }

  .forPlay {
      height: 90%;
      width: 100%;
      overflow: auto;

      .tbTbody {
          height: 100%;
          width: 100%;

          // margin-top: 20px;
          .tbTr {
              display: flex;
              align-items: center;
              justify-content: space-around;
              flex-wrap: nowrap;
              color: #1a1919;
              font-size: 13px;
              /* margin-bottom: 2%;*/
              height: 17%;

              .tbThL {
                  width: 30%;
                  text-align: center;
              }

              .tbThS {
                  width: 20%;
                  text-align: center;
              }
          }

          .tbTr:nth-child(even) {
              background: rgba(14, 205, 246, 0.07);
          }

          .tbTr:nth-child(odd) {
              background: rgba(14, 246, 242, 0.17);
          }
      }
  }

  /* 隐藏滚动条 */
  .forPlay::-webkit-scrollbar {
      width: 0 !important;
  }
}
</style>
